<template>
  <section>
    <h2>状态管理</h2>
    <h3>所有学生列表</h3>
    <ul>
      <li v-for="item in store.state.list" :key="item.id">{{item.name}}</li>
    </ul>
    <h3>所有女生列表</h3>
    <ul>
      <li v-for="item in store.getters.girlList" :key="item.id">{{item.name}}</li>
    </ul>
    <button @click="handleAdd">添加一个女生</button>
  </section>
</template>

<script lang="ts" setup>
    import {useStore} from "vuex";

    const store = useStore();

    let id = 5;
    
    // state,getter,mutaion,action
    function handleAdd() {
      // 辅助函数因为内部this指针的问题，没有办法使用
      store.commit("addStu",
        { name: "红红2", sex: "女", age: 18, id: id ++ },
      )
    }

</script>


<style scoped>

</style>